<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>%VITE_APP_TITLE%</title>

  <!-- loading样式 -->
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #page {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #container {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }

    #h3 {
      color: rgb(82, 79, 79);
    }

    #ring {
      width: 190px;
      height: 190px;
      border: 1px solid transparent;
      border-radius: 50%;
      position: absolute;
    }

    #ring:nth-child(1) {
      border-bottom: 8px solid rgb(240, 42, 230);
      animation: rotate1 2s linear infinite;
    }

    @keyframes rotate1 {
      from {
        transform: rotateX(50deg) rotateZ(110deg);
      }

      to {
        transform: rotateX(50deg) rotateZ(470deg);
      }
    }

    #ring:nth-child(2) {
      border-bottom: 8px solid rgb(240, 19, 67);
      animation: rotate2 2s linear infinite;
    }

    @keyframes rotate2 {
      from {
        transform: rotateX(20deg) rotateY(50deg) rotateZ(20deg);
      }

      to {
        transform: rotateX(20deg) rotateY(50deg) rotateZ(380deg);
      }
    }

    #ring:nth-child(3) {
      border-bottom: 8px solid rgb(3, 170, 170);
      animation: rotate3 2s linear infinite;
    }

    @keyframes rotate3 {
      from {
        transform: rotateX(40deg) rotateY(130deg) rotateZ(450deg);
      }

      to {
        transform: rotateX(40deg) rotateY(130deg) rotateZ(90deg);
      }
    }

    #ring:nth-child(4) {
      border-bottom: 8px solid rgb(207, 135, 1);
      animation: rotate4 2s linear infinite;
    }

    @keyframes rotate4 {
      from {
        transform: rotateX(70deg) rotateZ(270deg);
      }

      to {
        transform: rotateX(70deg) rotateZ(630deg);
      }
    }

    #title {
      position: absolute;
      top: 150px;
      font-size: 48px;
      font-weight: 700;
      background: linear-gradient(to bottom, #409eff, #b3d9ff);
      -webkit-background-clip: text;
      color: transparent;
    }
  </style>
  <!-- loading样式结束 -->
</head>

<body>
  <div id="app">
    <!-- loading -->
    <div style="width: 100vw;height: 100vh;display: flex;justify-content: center;align-items: center;">
      <p id="title">
        NewbieBoot
      </p>
      <div id="page">
        <div id="container">
          <div id="ring"></div>
          <div id="ring"></div>
          <div id="ring"></div>
          <div id="ring"></div>
          <div id="h3">loading</div>
        </div>
      </div>
    </div>
    <!-- loading结束 -->
  </div>
  <script type="module" src="/src/main.js"></script>
</body>

</html>